<script setup>
import uniList from "../../uni_modules/uni-list/components/uni-list/uni-list.vue";
import tabBar from "../../pages/comment/tabBar.vue"
import UniListItem from "../../uni_modules/uni-list/components/uni-list-item/uni-list-item.vue";
// 定义导航方法
function navigateTo(type) {
  let url = ''
  switch(type) {
    case 'statistics':
      url = '/teacher/eq/statistics'
      break
    case 'batch':
      url = '/teacher/eq/batch'
      break
    default:
      return
  }
  console.log('Navigating to:', url) // 添加日志确认点击事件触发
  uni.navigateTo({
    url: url
  })
}
const tonext = () => {
  uni.navigateTo({
    url: '/pages/index/index'
  })
}
</script>

<template>
  <view>
    <view class="gr">
      <table>
        <tr>
          <td rowspan="5"><image class="photos" src="/static/image/img_1.png"></image></td>
          <td>姓名</td>
          <td>林知夏 </td>
        </tr>
        <tr>
          <td>职工号</td>
          <td>2420250912</td>
        </tr>
        <tr>
          <td>学院</td>
          <td>软件学院</td>
        </tr>
        <tr>
          <td>专业</td>
          <td>软件工程</td>
        </tr>
        <tr>
          <td>班级</td>
          <td>01班</td>
        </tr>
      </table>
    </view>
    <view title="显示右侧箭头" type="line">
      <uni-list>
        <view title="显示右侧箭头" type="line">
          <uni-list>
            <!-- 使用 view 包装并添加点击事件 -->
            <view @click="navigateTo('statistics')">
              <uni-list-item showArrow title="返校统计"/>
            </view>
            <view @click="navigateTo('batch')">
              <uni-list-item showArrow title="返校批次"/>
            </view>

          </uni-list>
        </view>
      </uni-list>
      <view>
        <button class="js" type="primary" @click="tonext">角色切换</button>
      </view>

    </view>

    <tabBar :cur-index="4"></tabBar>
  </view>

</template>

<style scoped>

.gr{
  background-color: #F0F3FA;
  width: 100%;
  height: calc(100% - 60px);
  margin-top: 20px;
}
table{
  border-collapse: collapse;
  text-align: center;
  border: 1px solid #000;
  position: relative;
  left: 15px;
}
table th,
table td {
  border: 1px solid black;
  padding: 10px;
  text-align: center;/*文本居中*/
}
.photos{
  width: 200px;
  height: 250px;
}
.grzx {
  width: 100%;

  position: relative;
  border-radius: 3px;
}
.tbjl{
  border: 1px solid #ccc;
  width: 100%;
  height: 30px;
}
.js{
  position: relative;
  top:300px;
}
</style>